<template>
  <div id="app">
    <div id="body">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>

      <div class="ding" v-show="dinga" @click="ding">顶</div>
    </div>
    <div id="foot">
      <div>
        <nav
          @click="fun(index)"
          :class="{ bg: i == index }"
          v-for="(item, index) in arr"
          :key="index"
        >
          <van-icon :name="item.icon" />
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  name: "Home",
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      dinga: false,
      i: 0,
      arr: [
        { path: "/home/list", icon: "home-o" },
        { path: "/theme", icon: "plus" },
        { path: "/home/login", icon: "friends-o" },
      ],
    };
  },
  mounted() {
    document.getElementById("body").onscroll = () => {
      //为了保证兼容性，这里取两个值，哪个有值取哪一个
      //scrollTop就是触发滚轮事件时滚轮的高度
      var scrollTop = document.getElementById("body").scrollTop;
      if (scrollTop >= 300) {
        this.dinga = true;
      } else {
        this.dinga = false;
      }
    };
    // 刷新 保留 默认选中的样式
    this.arr.map((v,k)=>{
      if(v.path == this.$route.fullPath){
        this.i=k
      }
    })
  },
  methods: {
    fun(index) {
      let old = this.i;
      this.i = index;

      let p = this.arr[index].path;
      // 获取当前 要 去哪里的路由 p
      // 判断一下 如果 符合 说明需要登录,接着继续判断
      if (p == "/theme") {
        if (!JSON.parse(window.localStorage.getItem("user"))) {
          Dialog.confirm({
            title: "跳转",
            message: "你现在还没登录是否现在去登录",
          })
            .then(() => {
              // on confirm
              this.$router.push({
                name: "deng",
              });
            })
            .catch(() => {
              this.i = old; //old保存更改 this.i 之前上一次默认样式的位置,用于没有跳转过去的i设置
            });

          return false;
        }
      }

      // 防止重复 跳转 路由请求ajax 报错
      if (this.$route.fullPath == p) {
        return false;
      }

      this.$router.push({
        path: p,
      });
    },
    ding() {
      let timer = false;
      clearInterval(timer);
      var scrollHeight =
        document.body.offsetHeight - document.documentElement.clientHeight;
      timer = setInterval(function () {
        var scrolltop = document.getElementById("body").scrollTop;
        document.getElementById("body").scrollBy(0, -100);
        if (Math.ceil(scrolltop) <= 0) {
          clearInterval(timer);
        }
      }, 50);
    },
  },
};
</script>
<style lang="scss" scoped>
#app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  #body {
    flex-grow: 1;
    overflow: auto;
  }
  
#body::-webkit-scrollbar-track{		/*定义滚动条轨道 内阴影+圆角*/
    background-color: rgba(0,0,0,0.1);
}
#body::-webkit-scrollbar{	/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    width: 4px;
    background-color: rgba(0,0,0,0);
}
#body::-webkit-scrollbar-thumb{	/*定义滑块 内阴影+圆角*/
    background-color: #f55d44;
}
  #foot {
    border-top: 2px solid transparent;
    border-image: linear-gradient(to right, #c0c0aa, #1cefff);
    border-image-slice: 10;
    width: 100%;
    height: 0.4rem;
    line-height: 0.5rem;
    > div {
      width: 80%;
      height: 100%;
      margin: auto;
      display: flex;
      justify-content: space-around;
      > nav {
        font-size: 0.28rem;
        > i {
          color: #b8b892;
        }
      }
      > .bg > i {
        font-weight: 600;
        background-image: linear-gradient(to right, #c0c0aa, #1cefff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
.ding {
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  position: fixed;
  bottom: 0.8rem;
  right: 0.2rem;
  font-size: 0.14rem;
  background: pink;
  border-radius: 1.8rem;
}
</style>

